<template>
  <a-layout-content>
    <div
      v-for="(v, i) in tableDate"
      :key="i"
      class="float-left box-card rounded position-relative"
      :class="v.noselectColor"
    >
      <div @click="clickdata(v)" :title="v.name" class="position-absolute"></div>
      <el-checkbox
        @change="changecheckedlist(v.ID)"
        :label="v.ID"
        v-model="mycheckedlist"
      >{{v.name.slice(0, 15)}}</el-checkbox>
    </div>
  </a-layout-content>
</template>

<script>
import { difference } from "underscore";
export default {
  name: "changemodelgroup",
  data() {
    return {
      mycheckedlist: []
    };
  },
  props: {
    allcheckList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    search: {
      type: String,
      default: () => {
        return "";
      }
    },
    pagesize: {
      type: Number,
      default: () => {
        return 30;
      }
    },
    currentPage: {
      type: Number,
      default: () => {
        return 1;
      }
    },
    ID: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    groupdata: {
      type: Array,
      default: () => {
        return [];
      }
    },
    allData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    selectDate: {
      type: Array,
      default: () => {
        return [];
      }
    },
    clickdata: Function,
    changecheckedlist: Function,
    handleCurrentChange: Function
  },
  watch: {
    allcheckList(v) {
      this.mycheckedlist = v;
    },
    ID() {
      this.handleCurrentChange(1)
    }
  },
  computed: {
    tableDate() {
      const { currentPage, pagesize, inputgroup, selectID } = this;
      const data = inputgroup
        .slice((currentPage - 1) * pagesize, currentPage * pagesize)
        .map(v => {
          let noselectColor = "";
          const num = selectID.includes(v.ID);
          if (!num) {
            noselectColor = "admin-noselect-color";
          } else {
            noselectColor = "admin-select-color";
          }
          return {
            ...v,
            noselectColor
          };
        });
      return data;
    },
    inputgroup() {
      const { allData, search, thisgroupdata } = this;
      const data = allData.filter(v => thisgroupdata.includes(v.ID));
      return data.filter(
        data =>
          !search || data.name.toLowerCase().includes(search.toLowerCase())
      );
    },
    thisgroupdata() {
      const { ID, groupdata, allData } = this;
      if (groupdata.length) {
        return groupdata.filter(v => v.groupid == ID).map(v => v.childid);
      }
      return allData.map(v => v.ID);
    },
    selectID() {
      return this.selectDate.map(v => v.ID);
    },
    allDataID() {
      return this.allData.map(v => v.ID);
    },
    noID() {
      return difference(this.allDataID, this.selectID);
    }
  }
};
</script>

<style scoped>
.box-card {
  width: 240px;
  margin: 5px;
  cursor: pointer;
  height: 80px;
  padding: 8px;
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(64, 158, 255, 1);
}
.box-card:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.admin-noselect-color {
  background-color: #ffffff;
}
.admin-allselect-color {
  background-color: #e9f4ff;
  color: #ffffff;
}
.admin-select-color {
  background-color: #e9f4ff;
  color: #ffffff;
}
.position-absolute {
  width: 100%;
  height: 100%;
}
</style>
